<template>
	<view class="">
		<z-paging ref="paging" v-model="dataList">
		<view class="shopping_cart" v-for="(item,index) in dataList">
			<view class="shopping_cart_commodity_info">
				<view class="commodity_image">
					<image src="@/static/image/banner.png" mode=""></image>
				</view>
				<view class="commodity_synopsis">
					<view class="commodity_title">
						{{ item.goods_name }}
					</view>
					<view class="shopping_cart_timer_money">
						<view class="shopping_cart_timer" v-show="item.status == 1">
							付款倒计时: <text>15:16</text>
						</view>
						<view class="shopping_cart_money">
							￥{{ item.price }}
						</view>
					</view>
				</view>   
			</view>
			<view class="shopping_cart_btn">
				<slot name="footer"></slot>
				<!-- <view class="shopping_cart_checked_btn" v-show="cartCheaked">
					<image src="../../../static/image/shoppingUnselected.png" mode=""></image>
				</view> -->
				<view class="shopping_cart_order_btn" v-if="item.status == 1">
					<text class="shopping_cart_order_cancel">
						取消订单
					</text>
					<text class="shopping_cart_order_payment">
						立即付款
					</text>
				</view>
				<view class="shopping_cart_order_btn" v-if="item.status == 2">
					<text class="shopping_cart_order_cancel">
						待确认
					</text>
					<text class="shopping_cart_order_payment">
						查看详情
					</text>
				</view>
				<view class="shopping_cart_order_btn" v-if="item.status == 3">
					<text class="shopping_cart_order_cancel">
						已完成
					</text>
				</view>
				<view class="shopping_cart_order_btn" v-if="item.status == 4">
					<text class="shopping_cart_order_cancel">
						已超时
					</text>
				</view>
				<view class="shopping_cart_order_btn" v-if="item.status == 5">
					<text class="shopping_cart_order_cancel">
						已取消
					</text>
				</view>
				
			</view>

		</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		components: { 
		},
		data() {
			return {
				orderList: [], // 订单列表
				
			}
		},
		props: {
			/** 列表数据 */
			dataList: {
				type: Array,
				default: () => []
			}
		},
		onLoad() {
		},
		methods: {
			// queryList(pageNo, pageSize) {
			// 	console.log(pageNo, pageSize)
			// 	//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			// 	//这里的请求只是演示，请替换成自己的项目的网络请求，请在网络请求回调中
			// 	//通过this.$refs.paging.complete(请求回来的数组);将请求结果传给z-paging
			// 	// this.$request.queryList(pageNo, pageSize, (data) => {
			// 	// 	this.$refs.paging.complete(data);
			// 	// });
			// },
		},
		watch: {
			dataList: {
				handler(val) {
					console.log(val, '------------');
					this.orderList = JSON.parse(JSON.stringify(val));
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.shopping_cart {
		margin-top: 22rpx;
		border-radius: 10px;
		padding: 18rpx 18rpx 0rpx 18rpx;
		box-shadow: 8rpx -2rpx 60rpx 32rpx #efefef;
		.shopping_cart_commodity_info {
			display: flex;
			justify-content: space-between;
			padding-bottom: 22rpx;
			border-bottom: 1rpx solid #E5E5E5;
			
			margin-bottom: 20rpx;
		}
		.commodity_image {
			margin-right: 20rpx;
			width: 240rpx;
			height: 170rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
		.commodity_synopsis {
			width: 100%;
			.commodity_title {
				min-height: 65rpx;
				padding-top: 8rpx;
				line-height: 36rpx;
				color: #2D2D2D;
				padding: 9rpx 23rpx 0 0;
				font-size: 30rpx;
				overflow: hidden;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}
		.shopping_cart_timer_money {
			padding-top: 39rpx;
			display: flex;
			justify-content: space-between;
			.shopping_cart_money {
				font-size: 30rpx;
				padding-top: 8rpx;
				margin-left: auto;
			}
			.shopping_cart_timer {
				background-color: #FFF1D1;
				color: #D2A967;
				font-size: 24rpx;
				text-align: center;
				padding: 10rpx 12rpx;
				border-radius: 5rpx;
			}
		}
		.shopping_cart_btn {
			padding-top: 30rpx;
			height: 104rpx;
			box-sizing: border-box;
	        .shopping_cart_checked_btn {
				display: inline-block;
				image {
					width: 35rpx;
					height: 35rpx;
					vertical-align: middle;
				}
			}
			.shopping_cart_order_btn {
				float: right;
				text {
					font-size: 24rpx;
					text-align: center;
					border-radius: 5rpx;
					display: inline-block;
				}
				.shopping_cart_order_cancel{
					height: 46rpx;
					width: 136rpx;
					line-height: 46rpx;
					color: #999999;
					border: 1rpx solid #E5E5E5;
					
				}
				.shopping_cart_order_payment{
					color: #F4F5FA;
					height: 48rpx;
					width: 138rpx;
					line-height: 48rpx;
					background: linear-gradient(90deg, #CFA461 0%, #DCBB7E 100%);
					margin-left: 20rpx;
				
				}
			}
		}
	}
</style>
